import React, { useContext } from 'react';
/*
  使用 Context 上下文中的值
  Consumer 获取组件的传值，使用一个回调函数，参数就是传入的值
*/
import { Consumer } from './ContextBox';
/* 使用 useContext */
import myContext from './ContextBox';

console.group('函数中使用 context 中的数据');
export default function ContextChil2() {
  // 在函数组件中使用 useContext 来获取 全局context 中的值
  const context_hooks = useContext(myContext);

  // console.log( context_hooks );

  return (
    <React.StrictMode>
      <h3>《--- Context Child2 使用 Consumer ---》</h3>
      {/* 使用 context 中 consumer 的一种方法 */}
      <Consumer>
        {value => {
          // console.log('孙子元素是否能够获取Context上下文？', value);
          return (
            <p>
              孙子元素 -- {value.title} 值: {value.num}
            </p>
          );
        }}
      </Consumer>
      <h3>use hooks useContext</h3>
      <pre>
        <p>myContext 值：{JSON.stringify(context_hooks)}</p>
        <p>
          <span>myContext spceName: {context_hooks.spaceName}</span>
          <span> myContext count: {context_hooks.count}</span>
        </p>
      </pre>
    </React.StrictMode>
  );
}
console.groupEnd();
